<div class="content">
    <div id="example_title">
        <h1>Layout &amp; Dynamic Tabs</h1>
        Each panel of the layout has built-in support for toolbar and tabs. The example below demonstrates how to use this functionality.
    </div>
    <div id="example_view"></div>
    <div id="example_code"></div>
</div>

<!--CODE-->
<div id="main" style="width: 900px; height: 300px;"></div>

<!--CODE-->
<script type="module">
import { w2layout, w2sidebar, w2ui } from '__W2UI_PATH__'

// widget configuration
let config = {
    layout: {
        name: 'layout',
        padding: 0,
        panels: [
            { type: 'left', size: 200, resizable: true, minSize: 120 },
            { type: 'main', overflow: 'hidden',
                style: 'background-color: white; border: 1px solid #efefef; border-top: 0px; border-left: 0; padding: 10px;',
                tabs: {
                    active: 'tab0',
                    tabs: [{ id: 'tab0', text: 'Initial Tab' }],
                    onClick(event) {
                        layout.html('main', 'Active tab: '+ event.target)
                    },
                    onClose(event) {
                        // if active tab closed
                        if (event.detail.tab.id == this.active) {
                            this.click('tab0')
                        }
                    }
                }
            }
        ]
    },
    sidebar: {
        name: 'sidebar',
        nodes: [
            { id: 'general', text: 'General', group: true, expanded: true, nodes: [
                { id: 'item1', text: 'Item 1', icon: 'fa fa-list-alt' },
                { id: 'item2', text: 'Item 2', icon: 'fa fa-list-alt' },
                { id: 'item3', text: 'Item 3', icon: 'fa fa-list-alt' },
                { id: 'item4', text: 'Item 4', icon: 'fa fa-list-alt' }
            ]}
        ],
        onClick(event) {
            let tabs = w2ui.layout_main_tabs
            if (tabs.get(event.target)) {
                tabs.click(event.target)
            } else {
                tabs.add({ id: event.target, text: 'Tab '+ event.target, closable: true })
                tabs.click(event.target)
            }
        }
    }
}

let layout = new w2layout(config.layout)
let sidebar = new w2sidebar(config.sidebar)
layout.render('#main')
layout.html('left', sidebar)
</script>
